<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通用属性</title>
    <style>
        #d1,#d2,#d3{
            height: 40px;
        }

        #d1{
            width: 100px;
           
            /* background-color: blue; */
            /* background-color:#0000ff; */
            background-color:#00f;
        }
        #d2{
            width: 75%;
            /* 最小的宽度 */
            min-width: 200px;  
             /* background-color: red; */
             background-color: #ff0000;
        }

        #d3{
            /* 1em，再pc的浏览器中，默认为16px */
          width:20em;
          /* background-color: rgb(0,255,0); */
          background-color: rgba(0,255,0,0.5);
         
        }

#d4{
    width: 200px;
    height: 200px;
    border:10px dotted  red;
}

#d5{
    width: 200px;
    height: 200px;
    border:1px solid  #00f;
    /* border-radius: 50%; */
    border-radius: 50% 10%;
    /* border-radius: 10% 20% 40% 60%; */
}
#d6{
    width: 200px;
    height: 200px;
    border:1px solid  rgb(155, 135, 21);
    /* border-radius: 50%; */
    border-radius: 50% / 10%;
    /* border-radius: 10% 20% 40% 60%; */
}

#d7{
    width: 400px;
    height: 200px;
    border:1px solid  blue;
    box-shadow: 10px 10px 5px red;
     
}

#d8{
    width: 300px;
    height: 300px;
    background-color: #ccc;
    /* padding:20px 10px; */
    /* border:1px solid transparent; */
    /* overflow设置溢出属性，如果子元素比父元素要大，溢出的部分如何处理  hidden表示隐藏。 */
    overflow: hidden;
}

#d9{
    width: 200px;
    height: 200px;
    background-color: blue;
    /* margin:20px 10px; */
    /* margin-right: auto;
    margin-left:auto; */
    margin:10px auto;
    
}

    </style>
</head>
<body>
    <div id="d8">
        <div id="d9"></div>
    </div>


    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
    <div id="d4"></div>
    <div id="d5"></div>
    <div id="d6"></div>
    <div id="d7"></div>


    <pre>



    </pre>
</body>
</html>